<template>
   <div class="index_page">
        <!-- 搜索和导航 -->
        <van-sticky class='sticky_box'>
            <!-- 搜索条 -->
            <div class="search_header">
            <van-search placeholder="搜索关键词或者商品标题" v-model="value" shape='round'/>
            </div>
            
            <!-- 导航栏 -->
            <div class="my_nav_box">
            <van-tabs v-model="active" color='#f2890d'>
                <van-tab :title="item.text" v-for="(item, index) of navList" :key="index"></van-tab>
            </van-tabs>
            </div>
        </van-sticky>

        <!-- 轮播图 -->
        <div class="swiper_box">
           <van-swipe :autoplay="3000" indicator-color="#f2890d">
                <van-swipe-item v-for="(item, index) of swiperList" :key='index'>
                    <a :href="item._url">
                        <img :src="item._src" />
                    </a>
                </van-swipe-item>
            </van-swipe>
        </div>

        <!-- 平台列表 -->
        <div class="platform_box">
            <div class="platform_contaienr flex-box">
                <div class="platform_list">
                    <div>
                        <dt><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3447362221,2477162687&fm=26&gp=0.jpg" alt=""></dt>
                        <dd class="platform_name">淘宝</dd>
                    </div>
                </div>
                <div class="platform_list">
                    <div>
                        <dt><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=351454842,1172621550&fm=26&gp=0.jpg"/></dt>
                        <dd  class="platform_name">天猫</dd>
                    </div>
                </div>
                <div class="platform_list">
                    <div>
                        <dt><img src="" alt=""></dt>
                        <dd class="platform_name">拼多多</dd>
                    </div>
                </div>
            </div>
        </div>

        <!-- 商品列表 -->
        <div class="shop_box">
            <div class="shop_list_item flex-box" v-for="(item, index) of goodsList" :key="index" @click.stop='goJump("shop_details")'>
                <div class="shop_cover">
                    <img :src="item.cover" alt="">
                </div>
                <div class="shop_info">
                    <div class="shop_base_info">
                        <div class="shop_title clamp-2">{{item.name}}</div>
                        <div class="shop_store flex-box">
                            <div class="shop_store_name">{{item.store_name}}</div>
                            <div class="shop_store_name">已抢: {{item.num}}万件</div>
                        </div>
                        <div class="shop_dist">
                            <div class="shop_dist_money"></div>
                            <div class="shop_coupon_money"></div>
                        </div>
                    </div>
                    <div class="shop_price_info flex-box">
                        <div>券后价  &yen;<span class='price'>{{item.dist_price}}</span></div>
                        <div class="real_price_text">原价: &yen;{{item.real_price}}</div>
                    </div>
                    <div class="coupon_price">券{{item.coupon_price}}元</div>
                </div>
            </div>
        </div>
       
        <!-- 回到顶部 -->
        <div class='go_home_box'>
           <img src='@/assets/image/go_top_icon.png'/>
        </div>

        <!-- footer -->
       <Footer></Footer>
   </div>
</template>

<script>
  import Footer from '@/components/footer'
  export default  {
        name: 'index',
        components:{
            Footer
        },
        data() {
            return {
                value:'',
                active:0,
                swiperList:[
                    {
                        _url: 'kkkkk',
                        _src:  'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2229864841,4232235061&fm=26&gp=0.jpg'
                    },
                    {
                        _url: 'kkkkk',
                        _src:  'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2852083094,372235004&fm=26&gp=0.jpg'
                    },
                    {
                        _url: 'kkkkk',
                        _src:  'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3437217665,1564280326&fm=26&gp=0.jpg'
                    },
                ],
                navList:[
                    {
                        id: '111',
                        text:'衣服'
                    },
                     {
                        id: '222',
                        text:'包包'
                    },
                     {
                        id: '222',
                        text:'包包'
                    },
                     {
                        id: '222',
                        text:'包包'
                    },
                      {
                        id: '111',
                        text:'衣服'
                    },
                     {
                        id: '222',
                        text:'包包'
                    },
                     {
                        id: '222',
                        text:'包包'
                    },
                     {
                        id: '222',
                        text:'包包'
                    }
                ],
                goodsList:[
                    {
                        id:'393939',
                        cover:'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3437217665,1564280326&fm=26&gp=0.jpg',
                        name: '覅上的飞机附近的覅上的飞机附近的覅上的飞机附近的覅上的飞机附近的覅上的飞机附近的',
                        store_name: '啦啦旗舰店',
                        num:12,
                        dist_price: 12,
                        real_price: 24,
                        coupon_price:20
                    },
                    {
                        id:'3939139',
                        cover:'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2168486239,1962133587&fm=26&gp=0.jpg',
                        name: '覅上的飞机附近的覅上的飞机附近的覅上的飞机附近的覅上的飞机附近的覅上的飞机附近的',
                        store_name: '啦啦旗舰店',
                        num:23,
                        dist_price: 121,
                        real_price: 214,
                        coupon_price:90
                    },
                    {
                        id:'393939',
                        cover:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3646403421,3376537021&fm=26&gp=0.jpg',
                        name: '大熊猫咪',
                        store_name: '大熊猫旗舰店',
                        num:12,
                        dist_price: 12,
                        real_price: 24,
                        coupon_price:20
                    },
                     {
                        id:'3939139',
                        cover:'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2168486239,1962133587&fm=26&gp=0.jpg',
                        name: '覅上的飞机附近的覅上的飞机附近的覅上的飞机附近的覅上的飞机附近的覅上的飞机附近的',
                        store_name: '啦啦旗舰店',
                        num:23,
                        dist_price: 121,
                        real_price: 214,
                        coupon_price:90
                    },
                    {
                        id:'393939',
                        cover:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3646403421,3376537021&fm=26&gp=0.jpg',
                        name: '大熊猫咪',
                        store_name: '大熊猫旗舰店',
                        num:12,
                        dist_price: 12,
                        real_price: 24,
                        coupon_price:20
                    },
                     {
                        id:'3939139',
                        cover:'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2168486239,1962133587&fm=26&gp=0.jpg',
                        name: '覅上的飞机附近的覅上的飞机附近的覅上的飞机附近的覅上的飞机附近的覅上的飞机附近的',
                        store_name: '啦啦旗舰店',
                        num:23,
                        dist_price: 121,
                        real_price: 214,
                        coupon_price:90
                    },
                    {
                        id:'393939',
                        cover:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3646403421,3376537021&fm=26&gp=0.jpg',
                        name: '大熊猫咪',
                        store_name: '大熊猫旗舰店',
                        num:12,
                        dist_price: 12,
                        real_price: 24,
                        coupon_price:20
                    },
                     {
                        id:'3939139',
                        cover:'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2168486239,1962133587&fm=26&gp=0.jpg',
                        name: '覅上的飞机附近的覅上的飞机附近的覅上的飞机附近的覅上的飞机附近的覅上的飞机附近的',
                        store_name: '啦啦旗舰店',
                        num:23,
                        dist_price: 121,
                        real_price: 214,
                        coupon_price:90
                    },
                    {
                        id:'393939',
                        cover:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3646403421,3376537021&fm=26&gp=0.jpg',
                        name: '大熊猫咪',
                        store_name: '大熊猫旗舰店',
                        num:12,
                        dist_price: 12,
                        real_price: 24,
                        coupon_price:20
                    }
                ]
            }
        },
        methods: {
            goJump(name) {
                this.$router.push({name})
            }
        },
        async created() {

          window.console.log(this.$util.getBase64Image('https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1343015815,2335192405&fm=26&gp=0.jpg', (res) => {
              window.console.log(res);
              this.img_url = res;
              this.$util.dataURLtoBlob(res);
          }));
          let obj = {a:1,b:2, c:null,d:[1,2,3]};
          window.console.log(this.$util.deepCopy(obj));
          this.$util.wxPayment()
          
          window.console.log(this.$util.isWexin('130727199309264353'));
          try {
              this.$dialog.loading.open('加载中...');
              let res = await  this.$http.getProUserList({pageNum:0, pageSize:8,provinceId:1});
              this.$dialog.loading.close();
              window.console.log(res);
          }catch (e) {
              this.$dialog.loading.close();
              window.console.log(e);
              this.$dialog.toast({mes: e.rtnInfo});
          }


          // VueAMap.initAMapApiLoader({
          //     key: '1111',
          //     plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType',...],
          //     v: '1.4.4'
          // });
      }
  }
</script>

<style lang="less" scoped>
    .index_page {
        padding-bottom: 5rem;
        background-color: #F5F5F5;
        .sticky_box{
            background-color: #fff;
        }
        .search_header {
            // padding: 0 1.5rem;
            //background-color: #f2890d;
            /deep/ .van-search {
               // background-color: #f2890d !important;
            }
            input {
                padding-left: 1.5rem;
                width: 100%;
                height: 3rem;
                border:.1rem solid @border-bottom;
                border-radius: 2rem;
            }
           
        }
    
        .swiper_box img{
            width: 100%;
            height: 18rem;
        }

        /deep/ [class*=van-hairline]::after {
            border:none !important;
        }

        /deep/ .van-tabs__nav {
            // background-color: #f2890d;
        }

        /deep/ .van-tab{
            color:#323232;
        }
        /deep/ .van-tab--active{
            color:#f2890d !important;
            font-weight: bold;
        }

        .platform_box{
            padding:.8rem 1.2rem 0;
            .platform_contaienr{
                border-radius: .5rem;
                overflow: hidden;
            }
            .platform_list{
                padding:.6rem 0;
                background-color: #fff;
                img {
                    width:3rem;
                    height:3rem;
                    border-radius: .5rem;
                }
                .platform_name{
                    padding-top:.6rem;
                    font-size: 1.2rem;
                    color:#333;
                }
                flex:1;
                text-align: center;
            }
        }

        .shop_box{
            padding:0 1.2rem;
            .shop_list_item{
                margin-top:.8rem;
                padding:0 0 0 1.2rem;
                background-color: #fff;
                border-radius: .5rem;
                &.flex-box {
                    align-items: center;
                }
            }
            .shop_cover {
                flex-basis: 8rem;
                height: 8rem;
                img {
                    width:100%;
                    height: 100%;
                    border-radius: .5rem;
                }

            }
            .shop_info{
                padding:.5rem;
                overflow: hidden;
                position: relative;
                padding-left: .6rem;
                flex:1;
                .shop_title {
                    position: relative;
                    top:-.4rem;
                    padding-top:1.2rem;
                    padding-right: 4rem;
                    font-size: 1.2rem;
                    color:#333;
                }
                .shop_store.flex-box {  
                    justify-content: space-between;
                }
                .shop_price_info.flex-box {
                    position: relative;
                    top:-.4rem;
                    justify-content: space-between;
                    color:#f2890d;
                    font-size: 1.2rem;
                    font-weight: bold;
                    .real_price_text {
                        color:#ccc;
                        font-weight: normal;
                        text-decoration: line-through;
                    }
                    .price {
                        font-size: 1.8rem;
                    }
                }
                .shop_store_name {
                    padding-top:.6rem;
                    padding-bottom: .4rem;
                    font-size: 1.2rem;
                    color:#ccc;
                }
                .coupon_price{
                    position: absolute;
                    right: -2.4rem;
                    top:.6rem;
                    width:8rem;
                    height: 2rem;
                    line-height: 2rem;
                    color:#fff;
                    text-align: center;
                    background-color: #f2890d;
                    font-size: 1.2rem;
                    transform: rotate(45deg) scale(.8);
                }
            }
        }
    }
    .go_home_box{
        position:fixed;
        right: 1rem;
        bottom:5rem;
        z-index:999;
        background-color: transparent;
        img {
            width:3rem;
        }
    }
</style>